<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <title>获取设备摄像头 getUserMedia</title>
  <!--[if lt IE 9]><script>alert('您的浏览器版本过低，请更新本版本浏览器，或更换为诸如谷歌浏览器的现代浏览器')</script><![endif]-->
  <style>
    .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
    }

    .tips {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      padding: .5rem 1rem;
      background: #f7f7f7;
    }

    .copyright {
      position: absolute;
      z-index: 9999;
      bottom: 0;
      left: 0;
      right: 0;
      padding: .5rem 1rem;
      background: #fff;
      box-shadow: 0 0 1rem rgba(0, 0, 0, .2);
    }
  </style>
</head>

<body>
  <video class="bg"></video>
  <div class="tips">调取摄像头只适用于安卓机，苹果机可使用全景画布作为替代方案，另：此方法必须使用 https</div>
  <div class="copyright">
    本案例由张永恒<alias></alias>实现，<br>
    联系我可通过 <a href="https://github.com/foreverZ133" target="_blank">github</a> /
    <a href="https://home.cnblogs.com/u/foreverZ/" target="_blank">cnblog</a><br>
    或者 E-mail: <a href="mailto:617754841@qq.com">617754841@qq.com</a>
  </div>
  <script>
    // 一堆兼容代码
    window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      }
    }

    // 配置设置
    var mediaOpts = {
      audio: false,
      video: true,
      // video: { width: 1280, height: 720 }
      // video: { facingMode: "environment"}, // 或者 "user"
    }

    // 成功回调
    function successFunc(stream) {
      var video = document.querySelector('video');
      if ("srcObject" in video) {
        video.srcObject = stream
      } else {
        video.src = window.URL && window.URL.createObjectURL(stream) || stream
      }
      video.play();
    }

    function errorFunc(err) {
      alert(err.name);
    }

    // 正式启动摄像头
    navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
  </script>
</body>

</html>